<template>
    <!-- 注册页面的背景容器，根据show数据属性决定是否显示，同时应用moveStyle样式 -->
    <div class="register_background" v-show="show" :style="moveStyle">
        <!-- 包含注册表单的容器 -->
        <div class="register_box">
            <!-- 注册页面的标题 -->
            <div class="title">注册</div>
            <!-- Element UI的表单组件，使用registerForm作为数据模型，registerRules作为验证规则，并且注册一个引用 -->
            <el-form class="register_form" :model="registerForm" :rules="registerRules" ref="registerRef">
                <!-- 用户名输入项，使用Element UI的输入组件，并绑定到registerForm的username -->
                <el-form-item prop="username">
                    <el-input placeholder="用户名" v-model="registerForm.username" prefix-icon="el-icon-user" clearable>
                    </el-input>
                </el-form-item>
                <!-- 密码输入项，使用Element UI的密码输入组件，并绑定到registerForm的password -->
                <el-form-item prop="password">
                    <el-input show-password clearable v-model="registerForm.password" prefix-icon="el-icon-lock"
                        placeholder="密码">
                    </el-input>
                </el-form-item>
                <!-- 确认密码输入项，使用Element UI的密码输入组件，并绑定到registerForm的confirmPassword -->
                <el-form-item prop="confirmPassword">
                    <el-input show-password clearable v-model="registerForm.confirmPassword" prefix-icon="el-icon-lock"
                        placeholder="确认密码">
                    </el-input>
                </el-form-item>
                <!-- 注册按钮，点击时触发register方法 -->
                <el-form-item class="register_button">
                    <el-button type="success" round plain @click="register()">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Register', // 组件名称定义为Register
    data() {
        // 自定义验证器，用于比较两次输入的密码是否一致
        var confirmPassword = (rule, value, callback) => {
            if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        // 返回组件的数据对象
        return {
            // 注册表单的数据绑定对象
            registerForm: {
                username: '',
                password: '',
                confirmPassword: ''
            },
            // 注册表单的验证规则对象
            registerRules: {
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur' // 用于在输入框失去焦点时触发验证
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur' 
                }],
                confirmPassword: [{
                    required: true,
                    message: '请再次输入密码',
                    trigger: 'blur' // 同上
                }, {
                    validator: confirmPassword,
                    trigger: 'blur' // 同上
                }]
            },
            // 控制注册表单是否显示的布尔值
            show: false,
            // 用于动画效果的样式对象
            moveStyle: {}
        }
    },
    methods: {
        // 注册方法，验证表单并执行注册逻辑
        register() {
            // 使用Element的validate方法对表单进行验证
            this.$refs.registerRef.validate(async valid => {
                if (!valid) return;

                // 检查用户名是否已存在
                if (this.checkUsernameExists(this.registerForm.username)) {
                    this.$message.error('用户名已存在');
                    return;
                }

                // 注册用户并保存用户信息到localStorage
                this.saveUser(this.registerForm);
                // 提示注册成功
                this.$message({
                    type: 'success',
                    message: '注册成功'
                });
                // 重置表单
                this.$refs['registerRef'].resetFields();
                // 触发自定义事件，通知其他组件注册已完成
                this.$emit('toLogin');
            });
        },
        // 检查用户名是否存在的方法
        checkUsernameExists(username) {
            // 从localStorage获取用户数据并检查用户名
            const users = JSON.parse(localStorage.getItem('users')) || [];
            return users.some(user => user.username === username);
        },
        // 保存用户信息到localStorage的方法
        saveUser(user) {
            // 获取现有的用户数据或初始化为空数组
            let users = JSON.parse(localStorage.getItem('users')) || [];
            // 添加新用户到用户数组
            users.push(user);
            // 将用户数组保存回localStorage
            localStorage.setItem('users', JSON.stringify(users));
        }
    }
}
</script>
<style scoped>
    .register_background {
        position: absolute;
        right: 66%;
        top: 0%;
        background-color: #efa4cb;
        border-radius: 20px;
        width: 25%;
        height: 100%;
        transition: all 3s;
        
        box-shadow: 2px 0 10px rgba(61, 13, 13, 0.1);
        
    }

    .title {
        text-align: center;
        font-size: 40px;
        font-weight: bold;
        color: #F6F6F6;
        letter-spacing: 10px;
        padding-bottom: 40px;
    }

    .register_box {
        padding: 72px 0px;
    }

    .register_form {
        padding: 0px 30px;
        box-sizing: border-box;
    }

    .register_button {
        padding-top: 30px;
        display: flex;

        
    }
</style>